<!-- 
 * @description: 阅读页
 * @fileName: index.vue 
 * @author: panlua 
 * @date: 2019-07-06 16:10:18
 * @version: V1.0.0 
!-->
<template>
  <div class="read-page-content">
    <div id="book-content">
      <div class="title">
        <span>{{bookTitle}}</span>
        <span class="chapter-title">{{bookData.title}}</span>
      </div>
      <div class="content">
        <div class="inner-text" v-html="contentFilter(bookData.content)">
        </div>
      </div>
    </div>
    <!-- 右侧悬浮 -->
    <div class="right-hang">
      <div class="last-chapter" @click="lastChapter">
        上一章
      </div>
      <div class="catalog" @click="catalogClick">
        目录
      </div>
      <div class="next-chapter" @click="nextChapter">
        上一章
      </div>
    </div>
  </div>
</template>

<script>
import {api} from './api'
import merge from 'webpack-merge'

export default {
  data () {
    return {
      bookData: {
        title: '',
        content: ''
      },
      chapterIndex: 0,
      bookInfo: {},
      bookTitle: '',
      bookChapter: []
    }
  },
  mounted () {
    this.bookTitle = this.$route.query.bookTitle
    this.chapterIndex = Number(this.$route.query.chapterIndex)
    this.getBookChapter(this.$route.query.bookId)
  },
  methods: {
    /*
     *@name: 获取小说目录
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-09 17:00:49
    */
    getBookChapter (id) {
      this.$fetch(api.bookChapter, {id: id}).then(res => {
        if (res.ok) {
          this.bookChapter = res.chapterData
          this.getBookContent(this.bookChapter[this.chapterIndex].link)
        } else {
          this.$message.error(res.msgContent)
        }
      })
    },
    /*
     *@name: 获取本章内容
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-06 16:40:00
    */
    getBookContent (link) {
      this.$fetch(api.bookContent, {
        link: link
      }).then(res => {
        this.bookData = {
          title: res.chapter.title,
          content: res.chapter.cpContent
        }
      })
    },
    /*
     *@name: 内容过滤处理
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-09 17:01:02
    */
    contentFilter (el) {
      const arr = el.split('\n')
      let str = ''
      arr.forEach(item => {
        str += `<p style="text-indent: 32px;margin-bottom: 20px;">${item}</p>`
      });
      return str
    },
    /*
     *@name: 下一章
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-09 17:02:39
    */
    lastChapter () {
      if (this.chapterIndex === 0) {
        this.$message.warning('无上一章')
        return false
      }
      this.chapterIndex--
      this.$router.push({
          query:merge(this.$route.query,{'chapterIndex': this.chapterIndex})
      })
      this.getBookContent(this.bookChapter[this.chapterIndex].link)
    },
    /*
      *@name: 下一章
      *@param:{type} 
      *@description:
      *@return:
      *@author: panlua
      *@date: 2019-07-09 17:04:32
    */
    nextChapter () {
      if (this.chapterIndex === this.bookChapter.length - 1) {
        this.$message.warning('无下一章')
        return false
      }
      this.chapterIndex++
      this.$router.push({
            query:merge(this.$route.query,{'chapterIndex': this.chapterIndex})
        })
      this.getBookContent(this.bookChapter[this.chapterIndex].link)
    },
    /*
     *@name: 
     *@param:{type} 
     *@description:
     *@return:
     *@author: panlua
     *@date: 2019-07-09 17:11:13
    */
    catalogClick () {
      this.$message.warning('目录还在开发中')
    }
  }
}
</script>


<style lang="scss">
  .read-page-content {
    position: relative;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #d1d6be;
    padding: 50px 0;
    #book-content {
      width: 800px;
      margin: 0 auto;
      position: relative;
      .title {
        padding: 0 20px;
        height: 40px;
        line-height: 40px;
        font-size: 16px;
        background: #e9e6d0;
        box-shadow: 0 2px 2px #bbb;
        color: #755927;
        line-height: 40px;
        font-size: 16px;
        font-weight: bold;
        .chapter-title {
          float: right;
        }
      }
      .content {
        position: relative;
        margin-top: 6px;
        min-height: 800px;
        padding: 40px;
        background: #e9e6d0;
        font-size: 16px;
        line-height: 24px;
        .inner-text {
          overflow: hidden;
          color: #755927;
        }
      }
    }
    .right-hang {
      position: fixed;
      right: 10px;
      bottom: 200px;
      &>div {
        width: 80px;
        height: 80px;
        margin-bottom: 10px;
        text-align: center;
        line-height: 80px;
        color: #755927;
        background-color: #e9e6d0;
        cursor: pointer;
      }
    }
  }
</style>

